<template>
  <div>
    <ul>
      <li v-for="(value, key) in person" :key="key">{{ key }}: {{ value }}</li>
    </ul>
    <button @click="person.age++">更新年龄</button>
    <button @click="updatePerson">更新person</button>
    <button @click="addSex">添加sex属性</button>
    <hr />
    <ul>
      <li v-for="person in persons" :key="person.id">
        {{ person.name }}: {{ person.age }}
      </li>
    </ul>
    <button @click="updateAge">更新年龄</button>
    <button @click="updatePersons">更新persons</button>
  </div>
</template>

<script>
export default {
  name: "App",
  /*
    data中定义的数据都是响应式的数据
      
      新增的数据不是响应式的。
        - 对象上新增属性，不是响应式
        - 数组通过下标修改值或新增值，不是响应式。

      想要新增的数据是响应式：
        对象：
          this.$set(数据, 新增的属性, 属性的值) 
          Vue.set(数据, 新增的属性, 属性的值)

        数组：需要新增数据需要使用数组方法：push
          Vue底层重写了数组方法（push、shift...），通过这些方法操作数据，数据仍然是响应式的
  */
  data() {
    return {
      person: {
        name: "jack",
        age: 18,
      },
      persons: [
        { id: 1, name: "jack", age: 18 },
        { id: 2, name: "rose", age: 16 },
      ],
    };
  },
  methods: {
    addSex() {
      // this.person.sex = "男"; // 不是响应式
      this.$set(this.person, "sex", "男"); // 响应式
    },
    updatePerson() {
      this.person = { name: "rose", age: 16 }; // 响应式
    },
    updateAge() {
      this.persons[0].age++; // 响应式
    },
    updatePersons() {
      this.persons[0] = { id: 3, name: "华哥", age: 58 }; // 不是响应式
    },
  },
};
</script>

<style></style>
